<template>
	<view class="page-message">
		<cl-topbar :show-back="false" title="在线客服系统">
			<template slot="prepend">
				<cl-dropdown custom-class="op" :visible.sync="op.visible">
					<view class="cl-topbar__icon">
						<text class="iconfont icon-add-circle" @tap="op.visible = true"></text>
					</view>

					<template slot="dropdown">
						<view class="op" @tap="op.visible = false">
							<view class="cl-dropdown__item">
								<text class="iconfont icon-chat"></text>
								<text>发起聊天</text>
							</view>
							<view class="cl-dropdown__item">
								<text class="iconfont icon-create"></text>
								<text>创建群聊</text>
							</view>
							<view class="cl-dropdown__item">
								<text class="iconfont icon-add-friend"></text>
								<text>邀请好友</text>
							</view>
							<view class="cl-dropdown__item">
								<text class="iconfont icon-scan"></text>
								<text>扫一扫</text>
							</view>
						</view>
					</template>
				</cl-dropdown>
			</template>
		</cl-topbar>

		<view class="container">
			<scroll-view scroll-y class="scroller" @scrolltolower="loadMore"> 
				<view class="search">
					<cl-input
						:border="false"
						prefix-icon="cl-icon-search"
						round
						placeholder="搜索"
						clearable
						@input="searchChangeInput"
					></cl-input>
				</view>

				<view class="block" @click="toChat(item)" v-for="(item, index) in list" :key="index">
					<message-list :item="item"></message-list>
				</view>
				
				<cl-row>
					<cl-loadmore
						background-color="#fff"
						:loading="isLoading"
						:finish="finish"
						>没有更多了</cl-loadmore
					>
				</cl-row>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
import MessageList from '@/components/message-list';

export default {
	components: {
		MessageList
	},

	data() {
		return {
			list: [],
			backuplist:[],
			op: {
				visible: false
			},
			page:1,
			isLoading: false, //防止频繁触发
			finish: false
		};
	},
	onLoad() {
		let that = this;
		this.GetChatMessageList();
		this.onCustomerNotice();
		uni.$on('readMessage',function(data){
		    for(var i = 0;i<that.list.length;i++){
		    	if(that.list[i].uid == data){
					that.list[i].badge = null;
					that.backuplist = that.list;
					global.hub.invoke("CustomerSetMsgRead",parseInt(data)).then((res)=>{
					   //console.log(res);
					});
		    		break;
		    	}
		    }
		})
		uni.$on('userSendMessage',function(data){
			//console.log(data)
		    for(var i = 0;i<that.list.length;i++){
		    	if(that.list[i].uid == data.uid){
					if(data.type == 1 ||data.type == 2){
						that.list[i].message = data.msg;
					}else if(data.type == 3){
						that.list[i].message = '[文件]';
					}
					if(i!=0){
						that.list.unshift(that.list.splice(i , 1)[0]);//置顶
					}
					that.backuplist = that.list;
		    		break;
		    	}
		    }
		})
	},
	methods: {
		//监听新列表
		onCustomerNotice(){
			var that = this;
			if(!global.hub || !global.hub.openStatus){
				setTimeout(function(){
					that.onCustomerNotice();
				},500)
				return;
			}
			global.hub.on("CustomerOnNotice",(res)=>{
			    var curi = -1;
				for(var i = 0;i<that.list.length;i++){
					if(that.list[i].name == res.name){
						curi = i;
						break;
					}
				}
				if(res.message && res.message.length > 16){
					res.message = res.message.substring(0,16)+"...";
				}
				res.avatarUrl = global.baseUrl + res.avatarUrl;
				if(curi == -1){
					that.list.splice(0, 0, res);
				}else{
					if(curi!=0){
						that.list.unshift(that.list.splice(curi , 1)[0]);//置顶
					}
					that.list[0].badge += res.badge;
					that.list[0].message = res.message;
					that.list[0].date = res.date;
				}
				that.backuplist = that.list;
			})
		},
		toChat(item) {
			//console.log(item);
			uni.navigateTo({
				url: '/pages/chat/session?uid='+item.uid
			});
		},
		GetChatMessageList(){
			var that = this;
			if(!global.hub || !global.hub.openStatus){
				setTimeout(function(){
					that.GetChatMessageList();
				},500)
				return;
			}
			global.hub.invoke("CustomerGetChatMessageList",that.page).then((res)=>{
				res = JSON.parse(res);
				res.data.forEach(function(item,index,arr){
					arr[index].avatarUrl = global.baseUrl + arr[index].avatarUrl;
				})
				that.list = that.list.concat(res.data);
				that.page = that.page+1;
				if(res.data.length<20){
					that.finish = true;
				}
				that.backuplist = that.list;
			});
		},
		loadMore(){
			//防止重复触发
			if(this.isLoading){
				return;
			}
			//阻止事件重复触发
			this.isLoading=true;
			setTimeout(()=>{
				this.GetChatMessageList();
				this.isLoading=false;
			}, 1500);
		},
		searchChangeInput(e){
			let that = this;
			that.list = that.backuplist.filter(function(item, index, array){
			    return item.name.indexOf(e) !== -1;
			});
			
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	overflow: hidden;
}

.page-message {
	display: flex;
	flex-direction: column;
	height: 100%;

	.cl-topbar {
		flex-shrink: 0;
		&__icon {
			position: relative;

			.icon-add-circle {
				font-size: 55rpx;
			}
		}
	}

	.op {
		.cl-dropdown__item {
			.iconfont {
				font-size: 46rpx;
				margin-right: 15rpx;
			}
		}
	}

	.container {
		flex: 1;
		overflow: hidden;

		.scroller {
			height: 100%;

			.search {
				padding: 25rpx 38rpx;

				/deep/.cl-input {
					background-color: #f8f8f8;
				}
			}
		}
	}
}
</style>